﻿define(function (require, exports, module) {
    var Canvas = require('util/canvas');
    var ImageStorage = require('util/imageStorage');
    var Config = require('util/config');

    exports.renderAsync = eval(Wind.compile('async', function () {
        Canvas.clear();

        var enteringLayer = Canvas.createLayer();
        var enteringImage = $await(Canvas.createImageAsync({ id: 'entering', image: Config.images.ENTERING }));
        enteringLayer.add(enteringImage);
        Canvas.add(enteringLayer);

        var mapLayer = Canvas.createLayer({ id: 'mapLayer' });
        var bgRect = Canvas.createRect({ fill: 'black', width: Config.settings.WIDTH, height: Config.settings.HEIGHT });
        mapLayer.add(bgRect);
        for (var y = 0; y < 3; y++) {
            for (var x = 0; x < 3; x++) {
                var mapImage = Canvas.createImage({
                    id: ['area', x + y * 3].join('_'), width: Config.settings.WIDTH, height: Config.settings.HEIGHT,
                    x: 288 + (x - 1) * Config.settings.WIDTH, y: 216 + (y - 1) * Config.settings.HEIGHT
                });
                mapLayer.add(mapImage);
            }
        }
        Canvas.add(mapLayer);

        var characterLayer = Canvas.createLayer();
        var characterImage = Canvas.createImage({ id: 'character' });
        characterLayer.add(characterImage);

        var pointImage = $await(Canvas.createImageAsync({ id: 'pointer', image: Config.images.POINTER }));
        characterLayer.add(pointImage);
        enteringLayer.moveToTop();
    }));
});